<template>
  <div class="search-box">
    <el-autocomplete
      style="width: 600px; height: 30px"
      placeholder="请你输入医院的名称"
      v-model="hosname"
      :fetch-suggestions="fetchData"
      clearable
      class="inline-input w-50"
      @select="goDetail"
      :trigger-on-focus="false"
    />
    <el-button type="primary" icon="Search" style="margin-left: 10px"
      >搜索</el-button
    >
  </div>
</template>

<script>
import { reqHospitalInfo } from "@/api/HomePage";
export default {
  name: "SearchStyle",
  data() {
    return {
      hosname: "",
    };
  },
  methods: {
    async fetchData(keyword, cb) {
      let result = await reqHospitalInfo(keyword);
      let dataShow = result.data.map((item) => {
        return {
          value: item.hosname,
          hoscode: item.hoscode,
        };
      });
      cb(dataShow);
    },
    goDetail(item) {
      this.$router.push({
        path: "/hospital",
        query: { hoscode: item.hoscode },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
